<template>
	<view class="page-user">
		<view class="bgwhite">
			<view class="info_main">
				<view>头像</view>
				<view class="" style="width: 120upx; height: 120upx;"></view>
			</view>
			<view class="info_cont">
				<view>昵称</view>
				<input class="color999" v-model="nickname" type="text" placeholder="输入中文或英文，1~8个字" />
			</view>
			<view class="info_cont">
				<view>性别</view>
				<text class="iconfont icon-fanhui1"></text>
				<input class="color999" v-model="sex" type="text" placeholder="输入性别" />
			</view>
			<view class="info_cont">
				<!-- <view>生日</view>
				<text class="iconfont icon-fanhui1"></text> -->
				<view class="uni-list-cell-left">生日</view>
				<view class="uni-list-cell-db" style="float: right;">
					<picker mode="date" :value="birthday" @change="bindDateChange">
						<view class="uni-input">{{ birthday }}</view>
					</picker>
				</view>
				<!-- <view class="color999 uni-input" :value="birthday">请选择生日</view> -->
			</view>
			<view class="info_cont">
				<view>所在地</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input" @click="pickerShow=true" :value="addr">{{addr}}</view>
			</view>
			<view class="info_cont">
				<view>手机号</view>
				<text class="iconfont icon-fanhui1"></text>
				<input class="color999" type="text" :value="tel" disabled="true" />
			</view>
		</view>
		<w-picker mode="region" :visible="pickerShow" @cancel="pickerShow=false" @confirm="confirm" ></w-picker>
		<view class="confirm-btn" @click="EditUserInfo()">确定</view>
	</view>
</template>

<script>
import { getUserInfo, EditUserInfo } from '@/api/user.js';
export default {
	data() {
		return {
			list: [],
			avatar: '',
			nickname: '',
			sex: '',
			birthday: '',
			addr: '',
			addr_code: [],
			tel: '',
			pickerShow:false,
			is_default:false
		};
	},
	onLoad() {
		this.getUserInfo();
		// this.EditUserInfo();
		this.index=this.sex
	},
	methods: {
		getUserInfo() {
			let token = uni.getStorageSync('token');
			getUserInfo({ token }).then(res => {
				console.log(res);
				this.list = res.userInfo;
				this.nickname = this.list.nickname;
				this.birthday = this.list.birthday;
				this.sex = this.list.sex;
				this.addr = this.list.addr;
				this.tel = this.list.username;
			});
		},
		EditUserInfo() {
			let uid = uni.getStorageSync('uid');
			let { avatar, nickname, sex, birthday, addr, addr_code,is_default } = this;
			EditUserInfo({
				uid,
				avatar,
				nickname,
				sex,
				birthday,
				addr,
				addr_code,
				is_default
			}).then(res => {
				console.log(res);
			});
		},
		confirm({result,value}){
			this.pickerShow=false
			this.addr=result;
			this.addr_code=value
		},
		bindDateChange(e) {
			this.birthday = e.detail.value;
		},
		
	}
};
</script>

<style lang="scss">
.bgwhite {
	background: #fff;
}
.page-user {
	width: 100%;
	height: 100%;

	.info_main {
		width: 100%;
		height: 151upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		padding: 0 30upx;

		view {
			font-size: 30upx;
			color: #999999;
		}

		image {
			float: right;
			width: 94upx;
			height: 94upx;
			border-radius: 50%;
		}
	}

	.info_main:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #eeeeee;
	}

	.info_cont {
		width: 100%;
		height: 101upx;
		position: relative;
		overflow: hidden;
		padding: 0 30upx;

		view {
			font-size: 30upx;
			line-height: 101upx;
			color: #999999;
			float: left;
		}

		.txt {
			display: block;
			width: auto;
			height: 101upx;
			float: right;
			text-align: right;
			margin-right: 10upx;
			font-size: 30upx;
			width: 500upx;
		}

		.uni-input,
		input {
			display: block;
			width: auto;
			height: 101upx;
			float: right;
			text-align: right;
			margin-right: 10upx;
			font-size: 30upx;
			width: 500upx;
		}

		text {
			font-size: 14upx;
			color: #bfbfbf;
			float: right;
			line-height: 101upx;
		}

		.iconfont {
			font-size: 28upx;
		}
	}

	.uni-input-placeholder {
		color: #999;
	}

	.info_cont:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #eeeeee;
	}
}

.confirm-btn {
	width: 80%;
	height: 80upx;
	background: #fdd100;

	border-radius: 60upx;
	margin: 40upx auto;

	text-align: center;
	color: #fff;
	line-height: 80upx;
	font-size: 30upx;
}
</style>
